import { defineComponent } from "vue";
import type { ICourse } from '@/types'
import { useStore } from '@/hooks'
import { useRouter } from "vue-router";
import styles from "./index.module.less";

export default defineComponent({
    name: 'Home',
    setup() {
        const { courses } = useStore()
        const router = useRouter()
        const openCourse = (course: ICourse) => {
            router.push({
                path: '/course',
                query: {
                    id: course.title
                }
            })
        }

        const renderCourse = (course: ICourse) => {
            return (
                <div class={styles.homeContentItem} onClick={() => openCourse(course)}>
                    <div>
                        <div>{course.title}</div>
                    </div>
                </div>
            )
        }


        return () => {
            return (
                <div class={styles.home}>
                    <div class={styles.homeContent}>
                        {courses.map(renderCourse)}
                    </div>
                </div>
            )
        }
    }
})